<link rel="stylesheet" href="/web/lib/swiper-2.7.6.css">
<style type="text/less">
    @import "/web/public/public.less";
    #fragment-expert{
        width: 1024px;
        height: 872px;
        background: url("/web/img/zcb-export-bg.png") no-repeat center;
        padding-top: 90px;
        position: relative;
        &>.title{
            height: 30px;
            background: url("/web/img/text-pwzr.png") no-repeat center;
        }
    }
    .swiper-container{
        width: 782px;
        height: 515px;
        margin-top: 66px;
        .swiper-slide{
            position: relative;
            text-align: center;
            &.swiper-slide-active+.swiper-slide{
                .intro{
                    display: block;
                }
            }
            img{
                width: 209px;
                height: 318px;
                border: 2px solid #ffffff;
            }
            .intro{
                display: none;
                width: 100%;
                height: 334px;
                position: absolute;
                top: 180px;
                left: 1px;
                border: 1px solid #d4af82;
                padding: 140px 20px 20px;
                color: #ffffff;
                text-align: left;
                z-index: -1;
                .title{
                    line-height: 55px;
                    font-size: 24px;
                }
                .content{
                    font-size: 14px;
                    line-height: 24px;
                }
            }
        }

        .pagination {
            display: none;
            position: absolute;
            z-index: 20;
            bottom: 10px;
            width: 100%;
            text-align: right;
            padding-right: 20px;
        }
        .swiper-pagination-switch {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 8px;
            background: #A8A8A8;
            margin: 0 5px;
            opacity: 0.8;
            border: 1px solid #fff;
            cursor: pointer;
        }
        .swiper-active-switch {
            width: 21px;
            background: #fff;
        }
    }

    .swiper_btn{
        width: 40px;
        height: 70px;
        position: absolute;
        top: 50%;
        margin-top: -35px;


        &.swiper-button-prev{
            width: 86px;
            height: 196px;
            top: 430px;
            left: 0;
            .bg('/web/img/zcb-expert-arrow.png');
            transform: rotate(180deg);
        }
        &.swiper-button-next{
            width: 86px;
            height: 196px;
            top: 430px;
            right: 0;
            .bg('/web/img/zcb-expert-arrow.png');
        }
    }
</style>
<script src="/web/lib/less.min.js"></script>

<div id="fragment-expert">
    <div class="title"></div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <#if expertList?? && (expertList?size>0)>
                <#list expertList as expert>
                    <div class="swiper-slide red-slide">
                        <img src="${expert.expertImg}" alt="">
                        <div class="intro">
                            <p class="title">${expert.expertName}</p>
                            <p class="content">
                                ${expert.expertIntro}
                            </p>
                        </div>
                    </div>
                </#list>
            </#if>
        </div>
        <div class="pagination"></div>
    </div>
    <div class="swiper-button-prev swiper_btn"></div>
    <div class="swiper-button-next swiper_btn"></div>

</div>
<script src="/web/lib/swiper-2.7.6.min.js"></script>
<script>
    $(function () {
        var mySwiper = new Swiper('#fragment-expert .swiper-container',{
            pagination: '.pagination',
            paginationClickable: true,
            slidesPerView: 3,
            loop: true
        });
        $('#fragment-expert .swiper-button-prev').on('click', function(e){
            e.preventDefault()
            mySwiper.swipePrev();
        });
        $('#fragment-expert .swiper-button-next').on('click', function(e){
            e.preventDefault()
            mySwiper.swipeNext();
        });
    })

</script>